<template>
  <div class="tabbar">
    <template v-for="(item,index) in tabbarData">
        <div class="tabbar-item" :class="{active:currentIndex===index}" @click="changeItem(item,index)">
          <div v-if="currentIndex==index">
            <img  :src="item.imageActive" alt="">
          </div>
          <div v-else>
            <img :src="item.image" alt="">
          </div>
            <span>{{ item.text }}</span>
        </div>
    
    </template>
  </div>
</template>

<script setup>
import tabbarData from '@/assets/data/tabbar';
import {ref} from 'vue'
import { useRouter } from 'vue-router';

const router=useRouter()
const currentIndex=ref(0)
function changeItem(item,index){
  currentIndex.value=index
  router.push(item.path)
}

</script>

<style lang="less" scoped>
.tabbar{
    display: flex;
    position: fixed;
    bottom:0;
    right:0;
    left:0;
    height: 50px;
    border-top: 1px solid pink;
}
.tabbar-item{
    display: flex;
    flex: 1;
    justify-content: center;
  align-items: center;
   
}
.active{
  color:var(--primary-color)
}

</style>